<template>
  <div class="home">
     watch监听
     <p>{{count}}</p>
     <p>{{num}}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import { watchEffect,ref,reactive,toRefs } from 'vue';
export default {
  name: 'Home',
  components: {

  },
  setup(props) {
     const count = ref(0);
     const data = reactive({num:0});
     const obj = {age:10};
    watchEffect(()=>{ // 接受的参数是一个回调函数
      //  console.log(count.value) // 这里的值会被打印两次，0，1
      //  console.log(data.num); // 监听变化的值必须是基本的数据类型
      // console.log('asdfghj');
      console.log(obj.age);
    })
    setTimeout(() => {
      count.value++
      data.num++
      obj.age++
      // -> logs 1
    }, 1000)
    return{
      count,
      ...toRefs(data)
    }
  }

}
</script>
